<template>
  <div class="container">
    <!-- 试题库的导航 -->
    <h1>公共试题库</h1>

    <!-- 筛选条件 -->
    <div class="filters">
      <!-- 移除选择课程的下拉菜单 -->
      <select v-model="filters.difficulty" class="filter-select">
        <option value="">选择难度</option>
        <option value="简单">简单</option>
        <option value="中等">中等</option>
        <option value="困难">困难</option>
      </select>
      <select v-model="filters.type" class="filter-select">
        <option value="">选择题型</option>
        <option value="选择题">选择题</option>
        <option value="填空题">填空题</option>
      </select>
      <button @click="applyFilter" class="btn btn-primary">搜索</button>
      <!-- 新增试题按钮 -->
      <button @click="goToCreateQuestion" class="btn btn-secondary">新增试题</button>
    </div>

    <!-- 试题列表 -->
    <div v-if="filteredQuestions.length === 0" class="no-questions">
      暂无试题
    </div>
    <div v-else class="question-list">
      <div v-for="question in filteredQuestions" :key="question.id" class="question-card">
        <h3>{{ question.title }}</h3>
        <p>{{ question.type }} - {{ question.difficulty }}</p>
        <div class="actions">
          <!-- 加入我的题库按钮 -->
          <button @click="addToMyLibrary(question)" class="btn btn-secondary">加入我的题库</button>

          <!-- 加入试题篮按钮 -->
          <button @click="addToBasket(question)" class="btn btn-filled-basket">加入试题篮</button>

          <!-- 收藏按钮 -->
          <button @click="addToFavorites(question)" class="btn btn-filled-favorite">收藏</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="js">
export default {
  data() {
    return {
      questions: [
        { id: 1, title: '题目1', type: '选择题', difficulty: '简单', course: '数学' },
        { id: 2, title: '题目2', type: '填空题', difficulty: '中等', course: '物理' },
        { id: 3, title: '题目3', type: '选择题', difficulty: '困难', course: '英语' },
        { id: 4, title: '题目4', type: '填空题', difficulty: '简单', course: '数学' }
      ],
      filters: {
        difficulty: '',
        type: ''
      },
      myLibrary: [],  // 用于保存用户自建题库
      filteredQuestions: [] // 保留筛选后的试题
    };
  },
  created() {
    // 初始化时显示所有问题
    this.filteredQuestions = this.questions;
  },
  methods: {
    // 过滤功能
    applyFilter() {
      this.filteredQuestions = this.questions.filter(question => {
        return (
          (this.filters.difficulty === '' || question.difficulty === this.filters.difficulty) &&
          (this.filters.type === '' || question.type === this.filters.type)
        );
      });
    },
    // 跳转至新增试题页面
    goToCreateQuestion() {
      this.$router.push({ name: 'CreateQuestion' });
    },
    // 加入试题篮
    addToBasket(question) {
      alert(`${question.title} 已加入试题篮`);
    },
    // 加入收藏
    addToFavorites(question) {
      alert(`${question.title} 已收藏`);
    },
    // 加入我的题库
    addToMyLibrary(question) {
      // 检查题目是否已存在于我的题库
      if (!this.myLibrary.some(item => item.id === question.id)) {
        this.myLibrary.push(question);
        alert(`${question.title} 已加入我的题库`);
      } else {
        alert(`${question.title} 已经在我的题库中`);
      }
    }
  }
};
</script>

<style scoped>
/* 确保 html 和 body 充满整个页面并设置背景色 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f0f8ff; /* 柔和的淡蓝色背景 */
}

/* 容器背景与页面背景一致，去掉白色背景，扩大容器 */
.container {
  padding: 40px; /* 增大内边距 */
  max-width: 100%; /* 容器最大宽度设置为100%，让它占满整个屏幕 */
  width: 100%; /* 确保容器宽度100% */
  min-height: 100vh; /* 容器的最小高度设置为屏幕高度 */
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f8ff; /* 保持与页面相同的淡蓝色背景 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影以突出显示 */
}

h1 {
  text-align: center;
  color: #2c3e50;
}

.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-select {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.question-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.question-card {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.question-card h3 {
  margin: 0 0 10px;
  color: #333;
}

.actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}


/* 按钮通用样式 */
.btn {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

/* 主按钮样式 */
.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-secondary {
  background-color: #28a745;
  color: #fff;
}

.btn-filled-favorite {
  background-color: #ff9800; /* 橙色背景用于收藏 */
  color: #fff;
}

.btn-filled-favorite:hover {
  background-color: #e68900; /* 悬停时更暗的橙色 */
}

.btn-filled-basket {
  background-color: #4caf50; /* 绿色背景用于加入试题篮 */
  color: #fff;
}

.btn-filled-basket:hover {
  background-color: #43a047; /* 悬停时更暗的绿色 */
}

/* 按钮悬停统一透明度 */
.btn:hover {
  opacity: 0.9;
}
</style>
